import React from "react";
import {Spin} from "antd";
import {findDOMNode} from "react-dom";
import {WeaNewScroll} from "ecCom";
import {DropTarget} from 'react-dnd';
import ItemTypes from "./view/ItemTypes";
import {inject, observer} from "mobx-react";
import FBMain from "./FBMain";
import "./index.less";
import {Consumer} from "../theme";
import FBHeaderView from "../component/form-header/View";

const spec = {
  drop: (props, monitor) => {
    const canDrop = monitor.canDrop();
    const dragging = monitor.getItem().field;
    
    if (!canDrop) return;

    props.onDrop(dragging);
  },
  hover: (props, monitor) => {
    const isOver = monitor.isOver({ shallow: true });
    const dragging = monitor.getItem().field;

    // hover在content上时 默认添加在最后一行
    if (isOver) {
      props.onDragHover(dragging);
    }
  }
};
const collect = connect => ({
  connectDropTarget: connect.dropTarget()
});

@inject('routing', 'edcFormDesignerStore')
@observer
class MainContent extends React.Component {
  constructor(props) {
    super();

    const { componentStore } = props.edcFormDesignerStore;

    this.store = componentStore;
    this.state = {
      container: null
    };
  }

  componentDidMount() {
    this.setState({ 
      container: findDOMNode(this.container)
    });
  }

  render() {
    const { container } = this.state;
    const { connectDropTarget } = this.props;
    const { components,formHeader,oncurrComChange } = this.store;
    const spining = !components || !container; // container为空时 FBMain无法计算minHeight
    
    return (
      <Consumer>
        {({background, form}) => (
          <div className='ef-center'>
            <WeaNewScroll height='100%'>
              {connectDropTarget(
                <div className='wea-edc-form-main' style={background.css} ref={container => this.container = container}>
                  {spining ?
                    <Spin spining={spining}></Spin>
                    :
                    <FBMain form={form} container={container} />
                  }
                  <FBHeaderView
                    data={formHeader.config}
                    bottom={true}
                    onClick={() => {oncurrComChange(formHeader.uuid)}}
                  />
                </div>
              )}

            </WeaNewScroll>
          </div>
            )}
      </Consumer>
        );
  }
}

MainContent.defaultProps = {
  onDragHover: () => { },
  onDrop: () => { }
};

export default DropTarget(ItemTypes.FORMITEM, spec, collect)(MainContent);